<!doctype html><html lang="en">
 <head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <title>CSS Overscroll Behavior Module Level 1</title>
  <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
  <meta content="exploring" name="csswg-work-status">
  <meta content="ED" name="w3c-status">
  <meta content="This module defines &apos;overscroll-behavior&apos; to control the behavior when the scroll position  of a <a>scroll container</a> reaches the edge of the <a>scrollport</a>.  This allows content authors to hint that the <a>boundary default actions</a>,  such as scroll chaining and overscroll, should not be triggered." name="abstract">
  <link href="../default.css" rel="stylesheet" type="text/css">
  <link href="../csslogo.ico" rel="shortcut icon" type="image/x-icon">
<style>
  body {
    background: url("https://www.w3.org/StyleSheets/TR/logo-ED") top left no-repeat;
  }
  </style>
  <link href="https://www.w3.org/TR/css-overscroll-1/" rel="canonical">
<style>/* style-md-lists */

/* This is a weird hack for me not yet following the commonmark spec
   regarding paragraph and lists. */
[data-md] > :first-child {
    margin-top: 0;
}
[data-md] > :last-child {
    margin-bottom: 0;
}</style>
<style>/* style-selflinks */

.heading, .issue, .note, .example, li, dt {
    position: relative;
}
a.self-link {
    position: absolute;
    top: 0;
    left: calc(-1 * (3.5rem - 26px));
    width: calc(3.5rem - 26px);
    height: 2em;
    text-align: center;
    border: none;
    transition: opacity .2s;
    opacity: .5;
}
a.self-link:hover {
    opacity: 1;
}
.heading > a.self-link {
    font-size: 83%;
}
li > a.self-link {
    left: calc(-1 * (3.5rem - 26px) - 2em);
}
dfn > a.self-link {
    top: auto;
    left: auto;
    opacity: 0;
    width: 1.5em;
    height: 1.5em;
    background: gray;
    color: white;
    font-style: normal;
    transition: opacity .2s, background-color .2s, color .2s;
}
dfn:hover > a.self-link {
    opacity: 1;
}
dfn > a.self-link:hover {
    color: black;
}

a.self-link::before            { content: "¶"; }
.heading > a.self-link::before { content: "§"; }
dfn > a.self-link::before      { content: "#"; }</style>
<style>/* style-counters */

body {
    counter-reset: example figure issue;
}
.issue {
    counter-increment: issue;
}
.issue:not(.no-marker)::before {
    content: "Issue " counter(issue);
}

.example {
    counter-increment: example;
}
.example:not(.no-marker)::before {
    content: "Example " counter(example);
}
.invalid.example:not(.no-marker)::before,
.illegal.example:not(.no-marker)::before {
    content: "Invalid Example" counter(example);
}

figcaption {
    counter-increment: figure;
}
figcaption:not(.no-marker)::before {
    content: "Figure " counter(figure) " ";
}</style>
<style>/* style-autolinks */

.css.css, .property.property, .descriptor.descriptor {
    color: #005a9c;
    font-size: inherit;
    font-family: inherit;
}
.css::before, .property::before, .descriptor::before {
    content: "‘";
}
.css::after, .property::after, .descriptor::after {
    content: "’";
}
.property, .descriptor {
    /* Don't wrap property and descriptor names */
    white-space: nowrap;
}
.type { /* CSS value <type> */
    font-style: italic;
}
pre .property::before, pre .property::after {
    content: "";
}
[data-link-type="property"]::before,
[data-link-type="propdesc"]::before,
[data-link-type="descriptor"]::before,
[data-link-type="value"]::before,
[data-link-type="function"]::before,
[data-link-type="at-rule"]::before,
[data-link-type="selector"]::before,
[data-link-type="maybe"]::before {
    content: "‘";
}
[data-link-type="property"]::after,
[data-link-type="propdesc"]::after,
[data-link-type="descriptor"]::after,
[data-link-type="value"]::after,
[data-link-type="function"]::after,
[data-link-type="at-rule"]::after,
[data-link-type="selector"]::after,
[data-link-type="maybe"]::after {
    content: "’";
}

[data-link-type].production::before,
[data-link-type].production::after,
.prod [data-link-type]::before,
.prod [data-link-type]::after {
    content: "";
}

[data-link-type=element],
[data-link-type=element-attr] {
    font-family: Menlo, Consolas, "DejaVu Sans Mono", monospace;
    font-size: .9em;
}
[data-link-type=element]::before { content: "<" }
[data-link-type=element]::after  { content: ">" }

[data-link-type=biblio] {
    white-space: pre;
}</style>
<style>/* style-dfn-panel */

.dfn-panel {
    position: absolute;
    z-index: 35;
    height: auto;
    width: -webkit-fit-content;
    width: fit-content;
    max-width: 300px;
    max-height: 500px;
    overflow: auto;
    padding: 0.5em 0.75em;
    font: small Helvetica Neue, sans-serif, Droid Sans Fallback;
    background: #DDDDDD;
    color: black;
    border: outset 0.2em;
}
.dfn-panel:not(.on) { display: none; }
.dfn-panel * { margin: 0; padding: 0; text-indent: 0; }
.dfn-panel > b { display: block; }
.dfn-panel a { color: black; }
.dfn-panel a:not(:hover) { text-decoration: none !important; border-bottom: none !important; }
.dfn-panel > b + b { margin-top: 0.25em; }
.dfn-panel ul { padding: 0; }
.dfn-panel li { list-style: inside; }
.dfn-panel.activated {
    display: inline-block;
    position: fixed;
    left: .5em;
    bottom: 2em;
    margin: 0 auto;
    max-width: calc(100vw - 1.5em - .4em - .5em);
    max-height: 30vh;
}

.dfn-paneled { cursor: pointer; }
</style>
<style>/* style-syntax-highlighting */

.highlight:not(.idl) { background: hsl(24, 20%, 95%); }
code.highlight { padding: .1em; border-radius: .3em; }
pre.highlight, pre > code.highlight { display: block; padding: 1em; margin: .5em 0; overflow: auto; border-radius: 0; }
c-[a] { color: #990055 } /* Keyword.Declaration */
c-[b] { color: #990055 } /* Keyword.Type */
c-[c] { color: #708090 } /* Comment */
c-[d] { color: #708090 } /* Comment.Multiline */
c-[e] { color: #0077aa } /* Name.Attribute */
c-[f] { color: #669900 } /* Name.Tag */
c-[g] { color: #222222 } /* Name.Variable */
c-[k] { color: #990055 } /* Keyword */
c-[l] { color: #000000 } /* Literal */
c-[m] { color: #000000 } /* Literal.Number */
c-[n] { color: #0077aa } /* Name */
c-[o] { color: #999999 } /* Operator */
c-[p] { color: #999999 } /* Punctuation */
c-[s] { color: #a67f59 } /* Literal.String */
c-[t] { color: #a67f59 } /* Literal.String.Single */
c-[u] { color: #a67f59 } /* Literal.String.Double */
c-[cp] { color: #708090 } /* Comment.Preproc */
c-[c1] { color: #708090 } /* Comment.Single */
c-[cs] { color: #708090 } /* Comment.Special */
c-[kc] { color: #990055 } /* Keyword.Constant */
c-[kn] { color: #990055 } /* Keyword.Namespace */
c-[kp] { color: #990055 } /* Keyword.Pseudo */
c-[kr] { color: #990055 } /* Keyword.Reserved */
c-[ld] { color: #000000 } /* Literal.Date */
c-[nc] { color: #0077aa } /* Name.Class */
c-[no] { color: #0077aa } /* Name.Constant */
c-[nd] { color: #0077aa } /* Name.Decorator */
c-[ni] { color: #0077aa } /* Name.Entity */
c-[ne] { color: #0077aa } /* Name.Exception */
c-[nf] { color: #0077aa } /* Name.Function */
c-[nl] { color: #0077aa } /* Name.Label */
c-[nn] { color: #0077aa } /* Name.Namespace */
c-[py] { color: #0077aa } /* Name.Property */
c-[ow] { color: #999999 } /* Operator.Word */
c-[mb] { color: #000000 } /* Literal.Number.Bin */
c-[mf] { color: #000000 } /* Literal.Number.Float */
c-[mh] { color: #000000 } /* Literal.Number.Hex */
c-[mi] { color: #000000 } /* Literal.Number.Integer */
c-[mo] { color: #000000 } /* Literal.Number.Oct */
c-[sb] { color: #a67f59 } /* Literal.String.Backtick */
c-[sc] { color: #a67f59 } /* Literal.String.Char */
c-[sd] { color: #a67f59 } /* Literal.String.Doc */
c-[se] { color: #a67f59 } /* Literal.String.Escape */
c-[sh] { color: #a67f59 } /* Literal.String.Heredoc */
c-[si] { color: #a67f59 } /* Literal.String.Interpol */
c-[sx] { color: #a67f59 } /* Literal.String.Other */
c-[sr] { color: #a67f59 } /* Literal.String.Regex */
c-[ss] { color: #a67f59 } /* Literal.String.Symbol */
c-[vc] { color: #0077aa } /* Name.Variable.Class */
c-[vg] { color: #0077aa } /* Name.Variable.Global */
c-[vi] { color: #0077aa } /* Name.Variable.Instance */
c-[il] { color: #000000 } /* Literal.Number.Integer.Long */
</style>
 <body class="h-entry">
  <div class="head">
   <p data-fill-with="logo"><a class="logo" href="https://www.w3.org/"> <img alt="W3C" height="48" src="https://www.w3.org/StyleSheets/TR/2016/logos/W3C" width="72"> </a> </p>
   <h1 class="p-name no-ref" id="title">CSS Overscroll Behavior Module Level 1</h1>
   <h2 class="no-num no-toc no-ref heading settled" id="subtitle"><span class="content">Editor’s Draft, <time class="dt-updated" datetime="1970-01-01">1 January 1970</time></span></h2>
   <details>
    <summary>Specification Metadata</summary>
    <div data-fill-with="spec-metadata">
     <dl>
      <dt>This version:
      <dd><a class="u-url" href="https://drafts.csswg.org/css-overscroll-1/">https://drafts.csswg.org/css-overscroll-1/</a>
      <dt>Latest published version:
      <dd><a href="https://www.w3.org/TR/css-overscroll-1/">https://www.w3.org/TR/css-overscroll-1/</a>
      <dt class="editor">Editors:
      <dd class="editor p-author h-card vcard"><a class="p-name fn u-email email" href="mailto:bgirard@fb.com">Benoit Girard</a> (<span class="p-org org">Facebook</span>)
      <dd class="editor p-author h-card vcard" data-editor-id="81464"><a class="p-name fn u-email email" href="mailto:majidvp@google.com">Majid Valipour</a> (<span class="p-org org">Google</span>)
      <dd class="editor p-author h-card vcard"><span class="p-name fn"></span>
      <dt>Suggest an Edit for this Spec:
      <dd><a href="https://github.com/w3c/csswg-drafts/blob/master/css-overscroll-1/Overview.bs">GitHub Editor</a>
      <dt>Issue Tracking:
      <dd><a href="https://github.com/w3c/csswg-drafts/labels/css-overscroll-1">GitHub Issues</a>
     </dl>
    </div>
   </details>
   <div data-fill-with="warning"></div>
   <p class="copyright" data-fill-with="copyright"><a href="https://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 1970 <a href="https://www.w3.org/"><abbr title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a href="https://www.csail.mit.edu/"><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>, <a href="https://www.ercim.eu/"><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, <a href="https://www.keio.ac.jp/">Keio</a>, <a href="https://ev.buaa.edu.cn/">Beihang</a>). W3C <a href="https://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, <a href="https://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> and <a href="https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document">permissive document license</a> rules apply. </p>
   <hr title="Separator for header">
  </div>
  <div class="p-summary" data-fill-with="abstract">
   <h2 class="no-num no-toc no-ref heading settled" id="abstract"><span class="content">Abstract</span></h2>
   <p>This module defines <a class="property" data-link-type="propdesc" href="#propdef-overscroll-behavior" id="ref-for-propdef-overscroll-behavior">overscroll-behavior</a> to control the behavior when the scroll position

of a <a data-link-type="dfn" href="https://drafts.csswg.org/css-overflow-3/#scroll-container" id="ref-for-scroll-container">scroll container</a> reaches the edge of the <a data-link-type="dfn" href="https://drafts.csswg.org/css-overflow-3/#scrollport" id="ref-for-scrollport">scrollport</a>.
This allows content authors to hint that the <a data-link-type="dfn" href="#boundary-default-action" id="ref-for-boundary-default-action">boundary default actions</a>,
such as scroll chaining and overscroll, should not be triggered.</p>
    <a href="https://www.w3.org/TR/CSS/">CSS</a> is a language for describing the rendering of structured documents
(such as HTML and XML)
on screen, on paper, etc. 
  </div>
  <h2 class="no-num no-toc no-ref heading settled" id="status"><span class="content">Status of this document</span></h2>
  <div data-fill-with="status">
   <p> This is a public copy of the editors’ draft.
	It is provided for discussion only and may change at any moment.
	Its publication here does not imply endorsement of its contents by W3C.
	Don’t cite this document other than as work in progress. </p>
   <p> <a href="https://github.com/w3c/csswg-drafts/issues">GitHub Issues</a> are preferred for discussion of this specification.
	When filing an issue, please put the text “css-overscroll” in the title,
	preferably like this:
	“[css-overscroll] <i data-lt>…summary of comment…</i>”.
	All issues and comments are <a href="https://lists.w3.org/Archives/Public/public-css-archive/">archived</a>,
	and there is also a <a href="https://lists.w3.org/Archives/Public/www-style/">historical archive</a>. </p>
   <p> This document was produced by the <a href="https://www.w3.org/Style/CSS/">CSS Working Group</a>. </p>
   <p> This document was produced by a group operating under
	the <a href="https://www.w3.org/Consortium/Patent-Policy/">W3C Patent Policy</a>.
	W3C maintains a <a href="https://www.w3.org/2004/01/pp-impl/32061/status" rel="disclosure">public list of any patent disclosures</a> made in connection with the deliverables of the group;
	that page also includes instructions for disclosing a patent.
	An individual who has actual knowledge of a patent which the individual believes contains <a href="https://www.w3.org/Consortium/Patent-Policy/#def-essential">Essential Claim(s)</a> must disclose the information in accordance with <a href="https://www.w3.org/Consortium/Patent-Policy/#sec-Disclosure">section 6 of the W3C Patent Policy</a>. </p>
   <p> This document is governed by the <a href="https://www.w3.org/2019/Process-20190301/" id="w3c_process_revision">1 March 2019 W3C Process Document</a>. </p>
   <p></p>
  </div>
  <div data-fill-with="at-risk"></div>
  <nav data-fill-with="table-of-contents" id="toc">
   <h2 class="no-num no-toc no-ref" id="contents">Table of Contents</h2>
   <ol class="toc" role="directory">
    <li><a href="#intro"><span class="secno">1</span> <span class="content">Introduction</span></a>
    <li><a href="#motivating-examples"><span class="secno">2</span> <span class="content">Motivating Examples</span></a>
    <li><a href="#scroll-chaining-and-boundary-default-actions"><span class="secno">3</span> <span class="content">Scroll chaining and boundary default actions</span></a>
    <li>
     <a href="#overscroll-behavior-properties"><span class="secno">4</span> <span class="content">Overscroll Behavior Properties</span></a>
     <ol class="toc">
      <li><a href="#overscroll-behavior-longhands-physical"><span class="secno">4.1</span> <span class="content">Physical Longhands for <span class="property">overscroll-behavior</span></span></a>
      <li><a href="#overscroll-behavior-longhands-logical"><span class="secno">4.2</span> <span class="content">Flow-relative Longhands for <span class="property">overscroll-behavior</span></span></a>
     </ol>
    <li><a href="#security-and-privacy"><span class="secno">5</span> <span class="content">Security and Privacy Considerations</span></a>
    <li>
     <a href="#conformance"><span class="secno"></span> <span class="content"> Conformance</span></a>
     <ol class="toc">
      <li><a href="#document-conventions"><span class="secno"></span> <span class="content"> Document conventions</span></a>
      <li><a href="#conform-classes"><span class="secno"></span> <span class="content"> Conformance classes</span></a>
      <li>
       <a href="#conform-responsible"><span class="secno"></span> <span class="content"> Requirements for Responsible Implementation of CSS</span></a>
       <ol class="toc">
        <li><a href="#conform-partial"><span class="secno"></span> <span class="content"> Partial Implementations</span></a>
        <li><a href="#conform-future-proofing"><span class="secno"></span> <span class="content"> Implementations of Unstable and Proprietary Features</span></a>
        <li><a href="#conform-testing"><span class="secno"></span> <span class="content"> Implementations of CR-level Features</span></a>
       </ol>
     </ol>
    <li>
     <a href="#index"><span class="secno"></span> <span class="content">Index</span></a>
     <ol class="toc">
      <li><a href="#index-defined-here"><span class="secno"></span> <span class="content">Terms defined by this specification</span></a>
      <li><a href="#index-defined-elsewhere"><span class="secno"></span> <span class="content">Terms defined by reference</span></a>
     </ol>
    <li>
     <a href="#references"><span class="secno"></span> <span class="content">References</span></a>
     <ol class="toc">
      <li><a href="#normative"><span class="secno"></span> <span class="content">Normative References</span></a>
     </ol>
    <li><a href="#property-index"><span class="secno"></span> <span class="content">Property Index</span></a>
   </ol>
  </nav>
  <main>
   <h2 class="heading settled" data-level="1" id="intro"><span class="secno">1. </span><span class="content">Introduction</span><a class="self-link" href="#intro"></a></h2>
   <p><em>This section is not normative.</em></p>
   <p>A content author does not necessarily want <a data-link-type="dfn" href="#scroll-chaining" id="ref-for-scroll-chaining">scroll chaining</a> to occur for all <a data-link-type="dfn" href="https://drafts.csswg.org/css-overflow-3/#scroll-container" id="ref-for-scroll-container①">scroll
containers</a>. Some <span id="ref-for-scroll-container②">scroll containers</span> may be part of a <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#containing-block-chain" id="ref-for-containing-block-chain">containing block chain</a> but may
serve a different logical purpose in the document and may want to prevent scrolling from continuing
up the <a data-link-type="dfn" href="#scroll-chain" id="ref-for-scroll-chain">scroll chain</a>. To achieve this, a content author will install event listeners without
the <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#dom-eventtarget-addeventlistener" id="ref-for-dom-eventtarget-addeventlistener">passive flag</a> set and will use <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#dom-event-preventdefault" id="ref-for-dom-event-preventdefault">preventDefault</a> when there is a risk that scroll
chaining will occur. This is detrimental for the following reasons:</p>
   <ul>
    <li data-md>
     <p>The user agent may in the future introduce new input methods for scrolling that are not supported
by the content author’s event listeners.</p>
    <li data-md>
     <p>A non passive event listener will delay scrolling because the user agent will have to wait for the
result of the event listener to determine if <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#dom-event-preventdefault" id="ref-for-dom-event-preventdefault①">preventDefault</a> was called causing increased
scroll latency.</p>
    <li data-md>
     <p>When scrolling is performed near the edge of the <a data-link-type="dfn" href="#scroll-boundary" id="ref-for-scroll-boundary">scroll boundary</a>, the <a data-link-type="dfn" href="https://www.w3.org/TR/uievents/#default-action" id="ref-for-default-action">default action</a> may cause both scrolling to the edge of the <a data-link-type="dfn" href="https://drafts.csswg.org/css-overflow-3/#scroll-container" id="ref-for-scroll-container③">scroll container</a> and a <a data-link-type="dfn" href="#boundary-default-action" id="ref-for-boundary-default-action①">boundary default
action</a>. Calling <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#dom-event-preventdefault" id="ref-for-dom-event-preventdefault②">preventDefault</a> will not only cancel the <span id="ref-for-boundary-default-action②">boundary default action</span> but also the scroll to the edge of the <a data-link-type="dfn" href="https://drafts.csswg.org/css-overflow-3/#scrollport" id="ref-for-scrollport①">scrollport</a>.</p>
    <li data-md>
     <p>The <a data-link-type="dfn" href="https://www.w3.org/TR/uievents/#default-action" id="ref-for-default-action①">default action</a> for the event may also provide additional behavior that the author does
not want to cancel such as an overscroll affordance. <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#dom-event-preventdefault" id="ref-for-dom-event-preventdefault③">preventDefault</a> doesn’t allow the
content author to cancel only some of the <span id="ref-for-default-action②">default actions</span> such as scroll chaining.</p>
   </ul>
   <p>Thus, it is not possible for a content author to control <a data-link-type="dfn" href="#scroll-chaining" id="ref-for-scroll-chaining①">scroll chaining</a> and overscroll in a
robust, performant and forward compatible way. The <a class="property" data-link-type="propdesc" href="#propdef-overscroll-behavior" id="ref-for-propdef-overscroll-behavior①">overscroll-behavior</a> property fixes this
shortcoming.</p>
   <h2 class="heading settled" data-level="2" id="motivating-examples"><span class="secno">2. </span><span class="content">Motivating Examples</span><a class="self-link" href="#motivating-examples"></a></h2>
   <div class="example" id="example-d468490d">
    <a class="self-link" href="#example-d468490d"></a> A position fixed left navigation bar does not want to hand off scrolling to the document because a
scroll gesture performed on the navigation bar is almost never meant to scroll the document. Note
that using the native overscroll affordances are still desirable while scroll chaining is to be
prevented. 
<pre class="lang-css highlight"><c- f>#sidebar </c-><c- p>{</c->
  <c- k>overscroll-behavior</c-><c- p>:</c-> contain<c- p>;</c->
<c- p>}</c->
</pre>
    <p>In this case, the author can use <a class="css" data-link-type="value" href="#valdef-overscroll-behavior-contain" id="ref-for-valdef-overscroll-behavior-contain">contain</a> on the sidebar to
prevent scrolling from being chained to the parent document element.</p>
   </div>
   <div class="example" id="example-64e64c20">
    <a class="self-link" href="#example-64e64c20"></a> A page wants to implement their own pull-to-refresh effect and thus needs to disable browser
native overscroll action. 
<pre class="lang-css highlight"><c- f>html </c-><c- p>{</c->
  <c- c>/* only disable pull-to-refresh but allow swipe navigations */</c->
  <c- k>overscroll-behavior-y</c-><c- p>:</c-> contain<c- p>;</c->
<c- p>}</c->
</pre>
    <p>In this case, the author can use <a class="css" data-link-type="value" href="#valdef-overscroll-behavior-contain" id="ref-for-valdef-overscroll-behavior-contain①">contain</a> on the viewport
defining element to prevent overscroll from triggering navigation actions.</p>
   </div>
   <div class="example" id="example-8ba16b56">
    <a class="self-link" href="#example-8ba16b56"></a> A infinite scrollers loads more content as user reaches the boundary and thus wants to disable the
potentially confusing rubber banding effect in addition to scroll chaining. 
<pre class="lang-css highlight"><c- f>#infinite_scroller </c-><c- p>{</c->
  <c- k>overscroll-behavior-y</c-><c- p>:</c-> none<c- p>;</c->
<c- p>}</c->
</pre>
    <p>In this case the the author can use <a class="css" data-link-type="value" href="#valdef-overscroll-behavior-none" id="ref-for-valdef-overscroll-behavior-none">none</a> on the infinite
scroller to prevent both scroll chaining and overscroll affordance.</p>
   </div>
   <h2 class="heading settled" data-level="3" id="scroll-chaining-and-boundary-default-actions"><span class="secno">3. </span><span class="content">Scroll chaining and boundary default actions</span><a class="self-link" href="#scroll-chaining-and-boundary-default-actions"></a></h2>
   <p><em>Operating Systems have rules for scrolling such as scroll chaining and overscroll affordances.
This specification does not mandate if and how scroll chaining or overscroll affordances be
implemented. This specification only allows the content author to disable them if any are
implemented.</em></p>
   <p><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="scroll-chaining">Scroll chaining</dfn> is when scrolling is propagated from one <a data-link-type="dfn" href="https://drafts.csswg.org/css-overflow-3/#scroll-container" id="ref-for-scroll-container④">scroll container</a> to an
ancestor <span id="ref-for-scroll-container⑤">scroll container</span> following the <a data-link-type="dfn" href="#scroll-chain" id="ref-for-scroll-chain①">scroll chain</a>. Typically scroll chaining is
performed starting at the event target recursing up the <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#containing-block-chain" id="ref-for-containing-block-chain①">containing block chain</a>. When a <span id="ref-for-scroll-container⑥">scroll container</span> in this chain receives a scroll event or gesture it may act on it and/or
pass it up the chain. Chaining typically occurs when the <a data-link-type="dfn" href="https://drafts.csswg.org/css-overflow-3/#scrollport" id="ref-for-scrollport②">scrollport</a> has reached its boundary.</p>
   <p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="scroll-chain">scroll chain</dfn> is the order in which scrolling is propagated from one <a data-link-type="dfn" href="https://drafts.csswg.org/css-overflow-3/#scroll-container" id="ref-for-scroll-container⑦">scroll
container</a> to another. The <a data-link-type="dfn" href="https://drafts.csswg.org/cssom-view/#viewport" id="ref-for-viewport">viewport</a> participates in <a data-link-type="dfn" href="#scroll-chaining" id="ref-for-scroll-chaining②">scroll chaining</a> as the
document’s <a data-link-type="dfn" href="https://drafts.csswg.org/cssom-view/#dom-document-scrollingelement" id="ref-for-dom-document-scrollingelement">scrollingElement</a>, both regarding placement in the scroll chain as well as adhering
to the chaining rules applied to it.</p>
   <p><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="scroll-boundary">Scroll boundary</dfn> refers to when the scroll position of a <a data-link-type="dfn" href="https://drafts.csswg.org/css-overflow-3/#scroll-container" id="ref-for-scroll-container⑧">scroll container</a> reaches
the edge of the <a data-link-type="dfn" href="https://drafts.csswg.org/css-overflow-3/#scrollport" id="ref-for-scrollport③">scrollport</a>. If a scroll container has no potential to scroll, because it does
not <a data-link-type="dfn" href="https://drafts.csswg.org/css-overflow-3/#overflow" id="ref-for-overflow">overflow</a> in the direction of the scroll, the element is always considered to be at the
scroll boundary.</p>
   <p><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="boundary-default-action">Boundary default action</dfn> refers to the user-agent-defined <a data-link-type="dfn" href="https://www.w3.org/TR/uievents/#default-action" id="ref-for-default-action③">default action</a> performed
when scrolling against the edge of the <a data-link-type="dfn" href="https://drafts.csswg.org/css-overflow-3/#scrollport" id="ref-for-scrollport④">scrollport</a>. A <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="local-boundary-default-action">local boundary default action</dfn> is a <a data-link-type="dfn" href="#boundary-default-action" id="ref-for-boundary-default-action③">boundary default action</a> which is performed on the <a data-link-type="dfn" href="https://drafts.csswg.org/css-overflow-3/#scroll-container" id="ref-for-scroll-container⑨">scroll container</a> without
interacting with the page, for example displaying a overscroll UI affordance. Conversely, a <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="non-local-boundary-default-action">non-local boundary default action</dfn> interacts with the page, for example scroll chaining or
a navigation action.</p>
   <h2 class="heading settled" data-level="4" id="overscroll-behavior-properties"><span class="secno">4. </span><span class="content">Overscroll Behavior Properties</span><a class="self-link" href="#overscroll-behavior-properties"></a></h2>
   <p>The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="overscroll-behavior">overscroll behavior</dfn> controls the permitted <a data-link-type="dfn" href="#boundary-default-action" id="ref-for-boundary-default-action④">boundary default action</a> for a <a data-link-type="dfn" href="https://drafts.csswg.org/css-overflow-3/#scroll-container" id="ref-for-scroll-container①⓪">scroll container</a> element when its <a data-link-type="dfn" href="https://drafts.csswg.org/css-overflow-3/#scrollport" id="ref-for-scrollport⑤">scrollport</a> reaches the boundary of its scroll box.</p>
   <p>The <a class="property" data-link-type="propdesc" href="#propdef-overscroll-behavior" id="ref-for-propdef-overscroll-behavior②">overscroll-behavior</a> property specifies the <a data-link-type="dfn" href="#overscroll-behavior" id="ref-for-overscroll-behavior">overscroll behavior</a> for a <a data-link-type="dfn" href="https://drafts.csswg.org/css-overflow-3/#scroll-container" id="ref-for-scroll-container①①">scroll
container</a> element. It allows the content author to specify that a <span id="ref-for-scroll-container①②">scroll container</span> element must prevent scroll chaining and/or overscroll affordances.</p>
   <p>An element that is not <a data-link-type="dfn" href="https://drafts.csswg.org/css-overflow-3/#scroll-container" id="ref-for-scroll-container①③">scroll container</a> must accept but ignore the values of this property.
This property must be applied to all scrolling methods supported by the user agent.</p>
   <p class="note" role="note"><span>Note:</span> This property should provide guarantees that are, at least, as strong as <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#dom-event-preventdefault" id="ref-for-dom-event-preventdefault④">preventDefault</a> for preventing both scroll chaining and overscroll. Doing otherwise would cause content authors to
use <span id="ref-for-dom-event-preventdefault⑤">preventDefault</span> instead.</p>
   <table class="def propdef" data-link-for-hint="overscroll-behavior">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-overscroll-behavior">overscroll-behavior</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod">[ contain <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one">|</a> none <span id="ref-for-comb-one①">|</span> auto ]<a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-num-range" id="ref-for-mult-num-range">{1,2}</a>
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>auto auto
     <tr>
      <th>Applies to:
      <td><a data-link-type="dfn" href="https://drafts.csswg.org/css-overflow-3/#scroll-container" id="ref-for-scroll-container①④">scroll container</a> elements
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>no
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>n/a
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>see individual properties
     <tr>
      <th>Canonical order:
      <td><abbr title="follows order of property value definition">per grammar</abbr>
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animation type:</a>
      <td>discrete
     <tr>
      <th>Media:
      <td>visual
   </table>
   <p>The <a class="property" data-link-type="propdesc" href="#propdef-overscroll-behavior" id="ref-for-propdef-overscroll-behavior③">overscroll-behavior</a> property is a shorthand property that sets the specified values of <a class="property" data-link-type="propdesc" href="#propdef-overscroll-behavior-x" id="ref-for-propdef-overscroll-behavior-x">overscroll-behavior-x</a> and <a class="property" data-link-type="propdesc" href="#propdef-overscroll-behavior-y" id="ref-for-propdef-overscroll-behavior-y">overscroll-behavior-y</a> in that order. If only one value is specified,
the second value defaults to the same value.</p>
   <p>Values have the following meanings:</p>
   <dl>
    <dt><dfn class="dfn-paneled css" data-dfn-for="overscroll-behavior, overscroll-behavior-x, overscroll-behavior-y, overscroll-behavior-inline, overscroll-behavior-block" data-dfn-type="value" data-export id="valdef-overscroll-behavior-contain">contain</dfn> 
    <dd> This value indicates that the element must not perform <a data-link-type="dfn" href="#non-local-boundary-default-action" id="ref-for-non-local-boundary-default-action">non-local boundary default actions</a> such as scroll chaining or navigation. The user agent must not perform scroll chaining to any
    ancestors along the <a data-link-type="dfn" href="#scroll-chain" id="ref-for-scroll-chain②">scroll chain</a> regardless of whether the scroll originated at this
    element or one of its descendants. This value must not modify the behavior of how <a data-link-type="dfn" href="#local-boundary-default-action" id="ref-for-local-boundary-default-action">local
    boundary default actions</a> should behave, such as showing any overscroll affordances. 
    <dt><dfn class="dfn-paneled css" data-dfn-for="overscroll-behavior, overscroll-behavior-x, overscroll-behavior-y, overscroll-behavior-inline, overscroll-behavior-block" data-dfn-type="value" data-export id="valdef-overscroll-behavior-none">none</dfn> 
    <dd> This value implies the same behavior as <a class="css" data-link-type="value" href="#valdef-overscroll-behavior-contain" id="ref-for-valdef-overscroll-behavior-contain②">contain</a> and in
    addition this element must also not perform <a data-link-type="dfn" href="#local-boundary-default-action" id="ref-for-local-boundary-default-action①">local boundary default actions</a> such as
    showing any overscroll affordances. 
    <dt><dfn class="css" data-dfn-for="overscroll-behavior, overscroll-behavior-x, overscroll-behavior-y, overscroll-behavior-inline, overscroll-behavior-block" data-dfn-type="value" data-export id="valdef-overscroll-behavior-auto">auto<a class="self-link" href="#valdef-overscroll-behavior-auto"></a></dfn> 
    <dd> This value indicates that the user agent should perform the usual <a data-link-type="dfn" href="#boundary-default-action" id="ref-for-boundary-default-action⑤">boundary default action</a> with respect to <a data-link-type="dfn" href="#scroll-chaining" id="ref-for-scroll-chaining③">scroll chaining</a>, overscroll and navigation gestures. 
   </dl>
   <p class="note" role="note"><span>Note:</span> In the case where a user agent does not implement scroll chaining and overscroll affordances,
these values will have no side effects for a compliant implementation.</p>
   <p class="note" role="note"><span>Note:</span> Programmatic scrolling is clamped and can not trigger any <a data-link-type="dfn" href="#boundary-default-action" id="ref-for-boundary-default-action⑥">boundary default actions</a>.</p>
   <h3 class="heading settled" data-level="4.1" id="overscroll-behavior-longhands-physical"><span class="secno">4.1. </span><span class="content">Physical Longhands for <a class="property" data-link-type="propdesc" href="#propdef-overscroll-behavior" id="ref-for-propdef-overscroll-behavior④">overscroll-behavior</a></span><a class="self-link" href="#overscroll-behavior-longhands-physical"></a></h3>
   <table class="def propdef" data-link-for-hint="overscroll-behavior-x">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-overscroll-behavior-x">overscroll-behavior-x</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-overscroll-behavior-y">overscroll-behavior-y</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod">contain <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one②">|</a> none <span id="ref-for-comb-one③">|</span> auto
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>auto
     <tr>
      <th>Applies to:
      <td><a data-link-type="dfn" href="https://drafts.csswg.org/css-overflow-3/#scroll-container" id="ref-for-scroll-container①⑤">scroll container</a> elements
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>no
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>N/A
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>as specified
     <tr>
      <th>Canonical order:
      <td><abbr title="follows order of property value definition">per grammar</abbr>
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animation type:</a>
      <td>discrete
     <tr>
      <th>Media:
      <td>visual
   </table>
   <p>The <a class="property" data-link-type="propdesc" href="#propdef-overscroll-behavior-x" id="ref-for-propdef-overscroll-behavior-x①">overscroll-behavior-x</a> property specifies the <a data-link-type="dfn" href="#overscroll-behavior" id="ref-for-overscroll-behavior①">overscroll behavior</a> in the horizontal
axis and the <a class="property" data-link-type="propdesc" href="#propdef-overscroll-behavior-y" id="ref-for-propdef-overscroll-behavior-y①">overscroll-behavior-y</a> property specifies the <span id="ref-for-overscroll-behavior②">overscroll behavior</span> in the
vertical axis. When scrolling is performed along both the horizontal and vertical axes at the
same time, the <span id="ref-for-overscroll-behavior③">overscroll behavior</span> of each respective axis should be considered
independently.</p>
   <h3 class="heading settled" data-level="4.2" id="overscroll-behavior-longhands-logical"><span class="secno">4.2. </span><span class="content">Flow-relative Longhands for <a class="property" data-link-type="propdesc" href="#propdef-overscroll-behavior" id="ref-for-propdef-overscroll-behavior⑤">overscroll-behavior</a></span><a class="self-link" href="#overscroll-behavior-longhands-logical"></a></h3>
   <table class="def propdef" data-link-for-hint="overscroll-behavior-inline">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="css" data-dfn-type="property" data-export id="propdef-overscroll-behavior-inline">overscroll-behavior-inline<a class="self-link" href="#propdef-overscroll-behavior-inline"></a></dfn>, <dfn class="css" data-dfn-type="property" data-export id="propdef-overscroll-behavior-block">overscroll-behavior-block<a class="self-link" href="#propdef-overscroll-behavior-block"></a></dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod">contain <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one④">|</a> none <span id="ref-for-comb-one⑤">|</span> auto
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>auto
     <tr>
      <th>Applies to:
      <td><a data-link-type="dfn" href="https://drafts.csswg.org/css-overflow-3/#scroll-container" id="ref-for-scroll-container①⑥">scroll container</a> elements
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>no
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>N/A
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>as specified
     <tr>
      <th>Canonical order:
      <td><abbr title="follows order of property value definition">per grammar</abbr>
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animation type:</a>
      <td>discrete
     <tr>
      <th>Media:
      <td>visual
   </table>
   <p>These properties correspond to the <a class="property" data-link-type="propdesc" href="#propdef-overscroll-behavior-x" id="ref-for-propdef-overscroll-behavior-x②">overscroll-behavior-x</a> and <a class="property" data-link-type="propdesc" href="#propdef-overscroll-behavior-y" id="ref-for-propdef-overscroll-behavior-y②">overscroll-behavior-y</a> properties.
The mapping depends on the element’s <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-4/#propdef-writing-mode" id="ref-for-propdef-writing-mode">writing-mode</a>.</p>
   <h2 class="heading settled" data-level="5" id="security-and-privacy"><span class="secno">5. </span><span class="content">Security and Privacy Considerations</span><a class="self-link" href="#security-and-privacy"></a></h2>
    There are no known security or privacy impacts of this feature. The feature may be used to prevent
certain native UI features such as overscroll affordances and overscroll navigations (e.g., pull-
to-refresh, swipe navigations). However, this does not expose any additional abilities beyond what
is already possible in the platform e.g., by preventing the default action of the event that would
cause a scroll. 
  </main>
  <h2 class="no-ref no-num heading settled" id="conformance"><span class="content"> Conformance</span><a class="self-link" href="#conformance"></a></h2>
  <h3 class="heading settled" id="document-conventions"><span class="content"> Document conventions</span><a class="self-link" href="#document-conventions"></a></h3>
  <p>Conformance requirements are expressed with a combination of
	descriptive assertions and RFC 2119 terminology. The key words “MUST”,
	“MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”,
	“RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this
	document are to be interpreted as described in RFC 2119.
	However, for readability, these words do not appear in all uppercase
	letters in this specification. </p>
  <p>All of the text of this specification is normative except sections
	explicitly marked as non-normative, examples, and notes. <a data-link-type="biblio" href="#biblio-rfc2119">[RFC2119]</a> </p>
  <p>Examples in this specification are introduced with the words “for example”
	or are set apart from the normative text with <code>class="example"</code>,
	like this: </p>
  <div class="example" id="example-ae2b6bc0">
   <a class="self-link" href="#example-ae2b6bc0"></a> 
   <p>This is an example of an informative example. </p>
  </div>
  <p>Informative notes begin with the word “Note” and are set apart from the
	normative text with <code>class="note"</code>, like this: </p>
  <p class="note" role="note">Note, this is an informative note. </p>
  <p>Advisements are normative sections styled to evoke special attention and are
	set apart from other normative text with <code>&lt;strong class="advisement"></code>, like
	this: <strong class="advisement"> UAs MUST provide an accessible alternative. </strong> </p>
  <h3 class="heading settled" id="conform-classes"><span class="content"> Conformance classes</span><a class="self-link" href="#conform-classes"></a></h3>
  <p>Conformance to this specification
	is defined for three conformance classes: </p>
  <dl>
   <dt>style sheet 
   <dd>A <a href="http://www.w3.org/TR/CSS2/conform.html#style-sheet">CSS
			style sheet</a>. 
   <dt>renderer 
   <dd>A <a href="http://www.w3.org/TR/CSS2/conform.html#user-agent">UA</a> that interprets the semantics of a style sheet and renders
			documents that use them. 
   <dt>authoring tool 
   <dd>A <a href="http://www.w3.org/TR/CSS2/conform.html#user-agent">UA</a> that writes a style sheet. 
  </dl>
  <p>A style sheet is conformant to this specification
	if all of its statements that use syntax defined in this module are valid
	according to the generic CSS grammar and the individual grammars of each
	feature defined in this module. </p>
  <p>A renderer is conformant to this specification
	if, in addition to interpreting the style sheet as defined by the
	appropriate specifications, it supports all the features defined
	by this specification by parsing them correctly
	and rendering the document accordingly. However, the inability of a
	UA to correctly render a document due to limitations of the device
	does not make the UA non-conformant. (For example, a UA is not
	required to render color on a monochrome monitor.) </p>
  <p>An authoring tool is conformant to this specification
	if it writes style sheets that are syntactically correct according to the
	generic CSS grammar and the individual grammars of each feature in
	this module, and meet all other conformance requirements of style sheets
	as described in this module. </p>
  <h3 class="heading settled" id="conform-responsible"><span class="content"> Requirements for Responsible Implementation of CSS</span><a class="self-link" href="#conform-responsible"></a></h3>
  <p>The following sections define several conformance requirements
		for implementing CSS responsibly,
		in a way that promotes interoperability in the present and future. </p>
  <h4 class="heading settled" id="conform-partial"><span class="content"> Partial Implementations</span><a class="self-link" href="#conform-partial"></a></h4>
  <p>So that authors can exploit the forward-compatible parsing rules to assign fallback values, <strong>CSS renderers <em>must</em> treat as invalid
		(and <a href="http://www.w3.org/TR/CSS2/conform.html#ignore">ignore as appropriate</a>)
		any at-rules, properties, property values, keywords, and other syntactic constructs
		for which they have no usable level of support</strong>.
		In particular, user agents <em>must not</em> selectively ignore
		unsupported property values and honor supported values in a single multi-value property declaration:
		if any value is considered invalid (as unsupported values must be),
		CSS requires that the entire declaration be ignored. </p>
  <h4 class="heading settled" id="conform-future-proofing"><span class="content"> Implementations of Unstable and Proprietary Features</span><a class="self-link" href="#conform-future-proofing"></a></h4>
  <p>To avoid clashes with future stable CSS features,
		the CSSWG recommends <a href="http://www.w3.org/TR/CSS/#future-proofing">following best practices</a> for the implementation of <a href="http://www.w3.org/TR/CSS/#unstable">unstable</a> features and <a href="http://www.w3.org/TR/CSS/#proprietary-extension">proprietary extensions</a> to CSS. </p>
  <h4 class="heading settled" id="conform-testing"><span class="content"> Implementations of CR-level Features</span><a class="self-link" href="#conform-testing"></a></h4>
  <p>Once a specification reaches the Candidate Recommendation stage,
		implementers should release an <a data-link-type="dfn" href="http://www.w3.org/TR/CSS/#vendor-prefix">unprefixed</a> implementation
		of any CR-level feature they can demonstrate
		to be correctly implemented according to spec,
		and should avoid exposing a prefixed variant of that feature. </p>
  <p>To establish and maintain the interoperability of CSS across
		implementations, the CSS Working Group requests that non-experimental
		CSS renderers submit an implementation report (and, if necessary, the
		testcases used for that implementation report) to the W3C before
		releasing an unprefixed implementation of any CSS features. Testcases
		submitted to W3C are subject to review and correction by the CSS
		Working Group. </p>
  <p>
   Further information on submitting testcases and implementation reports
		can be found from on the CSS Working Group’s website at <a href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>.
		Questions should be directed to the <a href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a> mailing list. 
<script src="https://www.w3.org/scripts/TR/2016/fixup.js"></script>
  </p>
  <h2 class="no-num no-ref heading settled" id="index"><span class="content">Index</span><a class="self-link" href="#index"></a></h2>
  <h3 class="no-num no-ref heading settled" id="index-defined-here"><span class="content">Terms defined by this specification</span><a class="self-link" href="#index-defined-here"></a></h3>
  <ul class="index">
   <li><a href="#valdef-overscroll-behavior-auto">auto</a><span>, in §4</span>
   <li><a href="#boundary-default-action">Boundary default action</a><span>, in §3</span>
   <li><a href="#valdef-overscroll-behavior-contain">contain</a><span>, in §4</span>
   <li><a href="#local-boundary-default-action">local boundary default action</a><span>, in §3</span>
   <li><a href="#valdef-overscroll-behavior-none">none</a><span>, in §4</span>
   <li><a href="#non-local-boundary-default-action">non-local boundary default action</a><span>, in §3</span>
   <li><a href="#propdef-overscroll-behavior">overscroll-behavior</a><span>, in §4</span>
   <li><a href="#overscroll-behavior">overscroll behavior</a><span>, in §4</span>
   <li><a href="#propdef-overscroll-behavior-block">overscroll-behavior-block</a><span>, in §4.2</span>
   <li><a href="#propdef-overscroll-behavior-inline">overscroll-behavior-inline</a><span>, in §4.2</span>
   <li><a href="#propdef-overscroll-behavior-x">overscroll-behavior-x</a><span>, in §4.1</span>
   <li><a href="#propdef-overscroll-behavior-y">overscroll-behavior-y</a><span>, in §4.1</span>
   <li><a href="#scroll-boundary">Scroll boundary</a><span>, in §3</span>
   <li><a href="#scroll-chain">scroll chain</a><span>, in §3</span>
   <li><a href="#scroll-chaining">Scroll chaining</a><span>, in §3</span>
  </ul>
  <aside class="dfn-panel" data-for="term-for-overflow">
   <a href="https://drafts.csswg.org/css-overflow-3/#overflow">https://drafts.csswg.org/css-overflow-3/#overflow</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-overflow">3. Scroll chaining and boundary default actions</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-scrollport">
   <a href="https://drafts.csswg.org/css-overflow-3/#scrollport">https://drafts.csswg.org/css-overflow-3/#scrollport</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-scrollport①">1. Introduction</a>
    <li><a href="#ref-for-scrollport②">3. Scroll chaining and boundary default actions</a> <a href="#ref-for-scrollport③">(2)</a> <a href="#ref-for-scrollport④">(3)</a>
    <li><a href="#ref-for-scrollport⑤">4. Overscroll Behavior Properties</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-mult-num-range">
   <a href="https://drafts.csswg.org/css-values-4/#mult-num-range">https://drafts.csswg.org/css-values-4/#mult-num-range</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-mult-num-range">4. Overscroll Behavior Properties</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-comb-one">
   <a href="https://drafts.csswg.org/css-values-4/#comb-one">https://drafts.csswg.org/css-values-4/#comb-one</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-comb-one">4. Overscroll Behavior Properties</a> <a href="#ref-for-comb-one①">(2)</a>
    <li><a href="#ref-for-comb-one②">4.1. Physical Longhands for overscroll-behavior</a> <a href="#ref-for-comb-one③">(2)</a>
    <li><a href="#ref-for-comb-one④">4.2. Flow-relative Longhands for overscroll-behavior</a> <a href="#ref-for-comb-one⑤">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-writing-mode">
   <a href="https://drafts.csswg.org/css-writing-modes-4/#propdef-writing-mode">https://drafts.csswg.org/css-writing-modes-4/#propdef-writing-mode</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-writing-mode">4.2. Flow-relative Longhands for overscroll-behavior</a>
   </ul>
  </aside>
  <h3 class="no-num no-ref heading settled" id="index-defined-elsewhere"><span class="content">Terms defined by reference</span><a class="self-link" href="#index-defined-elsewhere"></a></h3>
  <ul class="index">
   <li>
    <a data-link-type="biblio">[css-overflow-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-overflow" style="color:initial">overflow</span>
     <li><span class="dfn-paneled" id="term-for-scrollport" style="color:initial">scrollport</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-values-4]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-mult-num-range" style="color:initial">{a,b}</span>
     <li><span class="dfn-paneled" id="term-for-comb-one" style="color:initial">|</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-writing-modes-4]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-propdef-writing-mode" style="color:initial">writing-mode</span>
    </ul>
  </ul>
  <h2 class="no-num no-ref heading settled" id="references"><span class="content">References</span><a class="self-link" href="#references"></a></h2>
  <h3 class="no-num no-ref heading settled" id="normative"><span class="content">Normative References</span><a class="self-link" href="#normative"></a></h3>
  <dl>
   <dt id="biblio-css-overflow-3">[CSS-OVERFLOW-3]
   <dd>David Baron; Elika Etemad; Florian Rivoal. <a href="https://www.w3.org/TR/css-overflow-3/">CSS Overflow Module Level 3</a>. 31 July 2018. WD. URL: <a href="https://www.w3.org/TR/css-overflow-3/">https://www.w3.org/TR/css-overflow-3/</a>
   <dt id="biblio-css-values-4">[CSS-VALUES-4]
   <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://www.w3.org/TR/css-values-4/">CSS Values and Units Module Level 4</a>. 31 January 2019. WD. URL: <a href="https://www.w3.org/TR/css-values-4/">https://www.w3.org/TR/css-values-4/</a>
   <dt id="biblio-css-writing-modes-4">[CSS-WRITING-MODES-4]
   <dd>Elika Etemad; Koji Ishii. <a href="https://www.w3.org/TR/css-writing-modes-4/">CSS Writing Modes Level 4</a>. 24 May 2018. CR. URL: <a href="https://www.w3.org/TR/css-writing-modes-4/">https://www.w3.org/TR/css-writing-modes-4/</a>
   <dt id="biblio-rfc2119">[RFC2119]
   <dd>S. Bradner. <a href="https://tools.ietf.org/html/rfc2119">Key words for use in RFCs to Indicate Requirement Levels</a>. March 1997. Best Current Practice. URL: <a href="https://tools.ietf.org/html/rfc2119">https://tools.ietf.org/html/rfc2119</a>
  </dl>
  <h2 class="no-num no-ref heading settled" id="property-index"><span class="content">Property Index</span><a class="self-link" href="#property-index"></a></h2>
  <div class="big-element-wrapper">
   <table class="index">
    <thead>
     <tr>
      <th scope="col">Name
      <th scope="col">Value
      <th scope="col">Initial
      <th scope="col">Applies to
      <th scope="col">Inh.
      <th scope="col">%ages
      <th scope="col">Anim­ation type
      <th scope="col">Canonical order
      <th scope="col">Com­puted value
      <th scope="col">Media
    <tbody>
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-overscroll-behavior" id="ref-for-propdef-overscroll-behavior⑥">overscroll-behavior</a>
      <td>[ contain | none | auto ]{1,2}
      <td>auto auto
      <td>scroll container elements
      <td>no
      <td>n/a
      <td>discrete
      <td>per grammar
      <td>see individual properties
      <td>visual
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-overscroll-behavior-block" id="ref-for-propdef-overscroll-behavior-block">overscroll-behavior-block</a>
      <td>contain | none | auto
      <td>auto
      <td>scroll container elements
      <td>no
      <td>N/A
      <td>discrete
      <td>per grammar
      <td>as specified
      <td>visual
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-overscroll-behavior-inline" id="ref-for-propdef-overscroll-behavior-inline">overscroll-behavior-inline</a>
      <td>contain | none | auto
      <td>auto
      <td>scroll container elements
      <td>no
      <td>N/A
      <td>discrete
      <td>per grammar
      <td>as specified
      <td>visual
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-overscroll-behavior-x" id="ref-for-propdef-overscroll-behavior-x③">overscroll-behavior-x</a>
      <td>contain | none | auto
      <td>auto
      <td>scroll container elements
      <td>no
      <td>N/A
      <td>discrete
      <td>per grammar
      <td>as specified
      <td>visual
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-overscroll-behavior-y" id="ref-for-propdef-overscroll-behavior-y③">overscroll-behavior-y</a>
      <td>contain | none | auto
      <td>auto
      <td>scroll container elements
      <td>no
      <td>N/A
      <td>discrete
      <td>per grammar
      <td>as specified
      <td>visual
   </table>
  </div>
  <aside class="dfn-panel" data-for="scroll-chaining">
   <b><a href="#scroll-chaining">#scroll-chaining</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-scroll-chaining">1. Introduction</a> <a href="#ref-for-scroll-chaining①">(2)</a>
    <li><a href="#ref-for-scroll-chaining②">3. Scroll chaining and boundary default actions</a>
    <li><a href="#ref-for-scroll-chaining③">4. Overscroll Behavior Properties</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="scroll-chain">
   <b><a href="#scroll-chain">#scroll-chain</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-scroll-chain">1. Introduction</a>
    <li><a href="#ref-for-scroll-chain①">3. Scroll chaining and boundary default actions</a>
    <li><a href="#ref-for-scroll-chain②">4. Overscroll Behavior Properties</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="scroll-boundary">
   <b><a href="#scroll-boundary">#scroll-boundary</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-scroll-boundary">1. Introduction</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="boundary-default-action">
   <b><a href="#boundary-default-action">#boundary-default-action</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-boundary-default-action①">1. Introduction</a> <a href="#ref-for-boundary-default-action②">(2)</a>
    <li><a href="#ref-for-boundary-default-action③">3. Scroll chaining and boundary default actions</a>
    <li><a href="#ref-for-boundary-default-action④">4. Overscroll Behavior Properties</a> <a href="#ref-for-boundary-default-action⑤">(2)</a> <a href="#ref-for-boundary-default-action⑥">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="local-boundary-default-action">
   <b><a href="#local-boundary-default-action">#local-boundary-default-action</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-local-boundary-default-action">4. Overscroll Behavior Properties</a> <a href="#ref-for-local-boundary-default-action①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="non-local-boundary-default-action">
   <b><a href="#non-local-boundary-default-action">#non-local-boundary-default-action</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-non-local-boundary-default-action">4. Overscroll Behavior Properties</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="overscroll-behavior">
   <b><a href="#overscroll-behavior">#overscroll-behavior</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-overscroll-behavior">4. Overscroll Behavior Properties</a>
    <li><a href="#ref-for-overscroll-behavior①">4.1. Physical Longhands for overscroll-behavior</a> <a href="#ref-for-overscroll-behavior②">(2)</a> <a href="#ref-for-overscroll-behavior③">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-overscroll-behavior">
   <b><a href="#propdef-overscroll-behavior">#propdef-overscroll-behavior</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-overscroll-behavior①">1. Introduction</a>
    <li><a href="#ref-for-propdef-overscroll-behavior②">4. Overscroll Behavior Properties</a> <a href="#ref-for-propdef-overscroll-behavior③">(2)</a>
    <li><a href="#ref-for-propdef-overscroll-behavior④">4.1. Physical Longhands for overscroll-behavior</a>
    <li><a href="#ref-for-propdef-overscroll-behavior⑤">4.2. Flow-relative Longhands for overscroll-behavior</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-overscroll-behavior-contain">
   <b><a href="#valdef-overscroll-behavior-contain">#valdef-overscroll-behavior-contain</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-overscroll-behavior-contain">2. Motivating Examples</a> <a href="#ref-for-valdef-overscroll-behavior-contain①">(2)</a>
    <li><a href="#ref-for-valdef-overscroll-behavior-contain②">4. Overscroll Behavior Properties</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-overscroll-behavior-none">
   <b><a href="#valdef-overscroll-behavior-none">#valdef-overscroll-behavior-none</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-overscroll-behavior-none">2. Motivating Examples</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-overscroll-behavior-x">
   <b><a href="#propdef-overscroll-behavior-x">#propdef-overscroll-behavior-x</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-overscroll-behavior-x">4. Overscroll Behavior Properties</a>
    <li><a href="#ref-for-propdef-overscroll-behavior-x①">4.1. Physical Longhands for overscroll-behavior</a>
    <li><a href="#ref-for-propdef-overscroll-behavior-x②">4.2. Flow-relative Longhands for overscroll-behavior</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-overscroll-behavior-y">
   <b><a href="#propdef-overscroll-behavior-y">#propdef-overscroll-behavior-y</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-overscroll-behavior-y">4. Overscroll Behavior Properties</a>
    <li><a href="#ref-for-propdef-overscroll-behavior-y①">4.1. Physical Longhands for overscroll-behavior</a>
    <li><a href="#ref-for-propdef-overscroll-behavior-y②">4.2. Flow-relative Longhands for overscroll-behavior</a>
   </ul>
  </aside>
<script>/* script-dfn-panel */

document.body.addEventListener("click", function(e) {
    var queryAll = function(sel) { return [].slice.call(document.querySelectorAll(sel)); }
    // Find the dfn element or panel, if any, that was clicked on.
    var el = e.target;
    var target;
    var hitALink = false;
    while(el.parentElement) {
        if(el.tagName == "A") {
            // Clicking on a link in a <dfn> shouldn't summon the panel
            hitALink = true;
        }
        if(el.classList.contains("dfn-paneled")) {
            target = "dfn";
            break;
        }
        if(el.classList.contains("dfn-panel")) {
            target = "dfn-panel";
            break;
        }
        el = el.parentElement;
    }
    if(target != "dfn-panel") {
        // Turn off any currently "on" or "activated" panels.
        queryAll(".dfn-panel.on, .dfn-panel.activated").forEach(function(el){
            el.classList.remove("on");
            el.classList.remove("activated");
        });
    }
    if(target == "dfn" && !hitALink) {
        // open the panel
        var dfnPanel = document.querySelector(".dfn-panel[data-for='" + el.id + "']");
        if(dfnPanel) {
            dfnPanel.classList.add("on");
            var rect = el.getBoundingClientRect();
            dfnPanel.style.left = window.scrollX + rect.right + 5 + "px";
            dfnPanel.style.top = window.scrollY + rect.top + "px";
            var panelRect = dfnPanel.getBoundingClientRect();
            var panelWidth = panelRect.right - panelRect.left;
            if(panelRect.right > document.body.scrollWidth && (rect.left - (panelWidth + 5)) > 0) {
                // Reposition, because the panel is overflowing
                dfnPanel.style.left = window.scrollX + rect.left - (panelWidth + 5) + "px";
            }
        } else {
            console.log("Couldn't find .dfn-panel[data-for='" + el.id + "']");
        }
    } else if(target == "dfn-panel") {
        // Switch it to "activated" state, which pins it.
        el.classList.add("activated");
        el.style.left = null;
        el.style.top = null;
    }

});
</script>